<!-- 用户详情 -->
<template>
    <div>
        <div style="height: 50px;"></div>
        <div class="apply">
            <div v-if="isShow">
                <div v-if="apply.status===-1">
                    <el-tag type="warning">申请未通过，可再次申请</el-tag>
                </div>
                <el-form ref="apply" :model="apply" label-width="80px" :rules="rules">
                    <el-form-item label="真实姓名" style="width:40%" prop="name">
                        <el-input v-model="apply.name"></el-input>
                    </el-form-item>

                    <el-form-item label="资历" prop="level">
                        <el-select v-model="apply.level" placeholder="请选择">
                            <el-option key="1" label="高级讲师" :value="1"></el-option>
                            <el-option key="2" label="首席讲师" :value="2"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="资历" prop="career">
                        <el-input
                            type="textarea"
                            :rows="4"
                            placeholder="请输入内容"
                            v-model="apply.career"
                            style="width:400px"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="简历" prop="intro">
                        <div>
                            <tinymce v-model="apply.intro" :height="300" :width="800" />
                        </div>
                    </el-form-item>
                    <el-form-item label="上传资料" prop="applicationUrl">
                        <el-upload
                            class="upload-demo"
                            drag
                            :action="BASE_API"
                            :on-success="uploadSuccess"
                            :before-upload="beforeUpload"
                            :file-list="fileList"
                            :on-remove="handleRemove"
                            :before-remove="beforeRemove"
                            :limit="1"
                        >
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">
                                将文件拖到此处，或
                                <em>点击上传</em>
                            </div>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">立即申请</el-button>
                        <el-button @click="getUserInfo()">清空</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div
                v-if="apply.status===1"
                style="width:500px;height:500px;align-items:center;justify-content: center;"
            >
                <el-link icon="el-icon-s-promotion">前往专属讲师的系统吧</el-link>
            </div>

            <div v-if="apply.status===0">
                <img src="~/assets/img/pic/applying.png" style="width:600px;height:400px;" />
            </div>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import cookie from "js-cookie";
import Tinymce from "@/components/Tinymce";
import { getUserApply, applyForTeacher } from "@/api/ucenter/teacherApply";
export default {
    layout: "default",
    //import引入的组件需要注入到对象中才能使用
    components: { Tinymce },
    data() {
        //这里存放数据
        return {
            BASE_API: "http://localhost:20000/oss/uploadPhoto",
            apply: {
                name: "",
                userId: "",
                intro: "", //简历
                career: "", //资历
                level: "", //头衔 1高级讲师 2首席讲师
                avatar: "",
                applicationUrl: "",
                status: "",
            },
            fileList: [],
            userInfo: {},
            isShow: false,
            rules: {
                name: [
                    {
                        required: true,
                        message: "请输入姓名",
                        trigger: "blur",
                    },
                ],
                level: [
                    {
                        required: true,
                        message: "请选择申请的讲师等级",
                        trigger: "change",
                    },
                ],

                career: [
                    {
                        required: true,
                        message: "请填写资历",
                        trigger: "blur",
                    },
                ],
                intro: [
                    {
                        required: true,
                        message: "请填写简历",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        onSubmit() {
            this.$refs.apply.validate((valid) => {
                if (valid) {
                    applyForTeacher(this.apply).then((response) => {
                        this.getUserApply();
                        this.$message({
                            message: "申请已提交，等待审核",
                            type: "success",
                        });
                    });
                } else {
                    return false;
                }
            });
        },
        getUserInfo() {
            return new Promise((resolve) => {
                var jsonStr = cookie.get("edu_user");
                if (jsonStr) {
                    var userInfo = JSON.parse(jsonStr);
                    this.userInfo = userInfo;
                    this.apply.userId = userInfo.id;
                    this.apply.avatar = userInfo.avatar;
                    this.apply.name = userInfo.nickname;
                    this.apply.applicationUrl = "";
                    this.apply.intro = "";
                    this.apply.career = "";
                    this.apply.level = "";
                    this.fileList = [];
                    if (!userInfo.teacherId) {
                        this.isShow = true;
                    }
                } else {
                    this.$confirm("请先登录", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                        .then(() => {
                            window.location.href = "/login";
                        })
                        .catch(() => {});
                }
                resolve();
            });
        },
        getUserApply() {
            getUserApply(this.userInfo.id).then((response) => {
                if (response.data.apply) {
                    this.apply = response.data.apply;
                    if (this.apply.status === 0 || this.apply.status === 1) {
                        this.isShow = false;
                    } else {
                        this.isShow = true;
                    }
                }
            });
        },
        /********************************上传文件******************************* */
        uploadSuccess(response, file, fileList) {
            this.apply.applicationUrl = response.data.url;
        },
        beforeUpload(file) {
            let type = file.type;
            console.log("文件类型", type);
            return true;
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        handleRemove() {
            this.apply.applicationUrl = "";
        },
        /********************************上传文件结束******************************* */
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.getUserInfo().then(() => {
            this.getUserApply();
        });
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发，页面一旦激活就会触发
};
</script>
<style scoped>
.apply {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>